<template>
  <div id="recruitUnit">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size:16px;">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/post' }">岗位设置</el-breadcrumb-item>
      <el-breadcrumb-item>{{unit.unitName}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick" style="margin:0 0 0 10px" id="recruitUnitTabs">
      <el-tab-pane name="xiada">
        <span slot="label">下达方案</span>
        <div style="clear:both;padding-top:10px">
          <xiada :timestamp="timestamp1" :canEdit="true" :unitId="unitId"></xiada>
        </div>
      </el-tab-pane>
      <el-tab-pane name="zhidu">
        <span slot="label">
          <!-- <el-badge style="float:right" is-dot class="item"> </el-badge> -->
          备案</span>
        <zhidu :timestamp="timestamp2" :canEdit="false" :unitId="unitId" />
      </el-tab-pane>
      <el-tab-pane name="renyuan">
        <span slot="label">人员管理</span>
        <renyuan :timestamp="timestamp3" :canEdit="false" :unitId="unitId"  />
      </el-tab-pane>
      <el-tab-pane name="zhibiao">
        <span slot="label">
          <!-- <el-badge style="float:right" is-dot class="item"> </el-badge> -->
          指标使用情况</span>
        <div style="clear:both;padding-top:10px">
          <zhibiao :timestamp="timestamp4" :canEdit="false" :unitId="unitId"  />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import xiada from './Showdata/xiada.vue'
import zhidu from './Showdata/zhidu.vue'
import zhibiao from './Showdata/zhibiao.vue'
import renyuan from './Showdata/renyuan.vue'
export default {
  components: {
    xiada,
    zhidu,
    zhibiao,
    renyuan
  },
  data () {
    return {
      unitId: null,
      timestamp1: null,
      timestamp2: null,
      timestamp3: null,
      timestamp4: null,
      unit: {},
      activeName: 'xiada'
    }
  },
  methods: {
    tabClick () {
      if (this.activeName === 'xiada') {
        this.timestamp1 = new Date().getTime()
      } else if (this.activeName === 'zhidu') {
        this.timestamp2 = new Date().getTime()
      } else if (this.activeName === 'renyuan') {
        this.timestamp3 = new Date().getTime()
      } else if (this.activeName === 'zhibiao') {
        this.timestamp4 = new Date().getTime()
      }
    },
    getUnitDetails () {
      this.$http
        .get(this.$http.defaults.postAPI + `api/cadrePostBusUnit/getById?id=` + this.unitId)
        .then(response => {
          if (response.data.success === true) {
            console.log('获取成功')
            this.unit = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    }
  },
  mounted () {
    this.unitId = this.$route.query.unitId
    this.getUnitDetails()
  }
}
</script>
<style scoped>
#recruitlist{
  padding: 0
}
</style>
<style>
/* #recruitUnitTabs .el-tabs__item.is-active{
    color: #fff !important;
    background: #0058AC;
} */
  #recruitUnit #recruitUnitTabs i.custom{
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    display:inline-block;
    background-size: cover;
    margin:0 auto;
  }
  #recruitUnit .icon_c_0{
    background-image: url(../assets/icon_selection_index0.png)
  }
  #recruitUnit .icon_c_1{
    background-image: url(../assets/icon_selection_index2.gif)
  }
  #recruitUnit .icon_c_2{
    background-image: url(../assets/icon_selection_index1.png)
  }
  #recruitUnit .icon_c_-1{
    background-image: url(../assets/icon_selection_index-1.png)
  }
  #recruitUnit .icon_c_3{
    background-image: url(../assets/icon_selection_index3.png)
  }
  #recruitUnit .icon_c_3a{
    background-image: url(../assets/icon_selection_index4t.png)
  }
  #recruitUnit .icon_c_3b{
    background-image: url(../assets/icon_selection_index3b.png)
  }
  #recruitUnit .icon_c_4{
    background-image: url(../assets/icon_selection_index4t.png)
  }
  #recruitUnit .icon_c_5{
    background-image: url(../assets/icon_selection_index4r.png)
  }
</style>
